<template>
    <el-dialog 
        class="set-auth" 
        v-dialog-drag 
        :visible="show" 
        width="750px" 
        :title="title" 
        :before-close="closeDialog" 
        :append-to-body="true" 
        :close-on-click-modal="false">
        <el-form :model="ruleForm" :rules="rules" ref="form">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="查看数据范围" name="1">
                    <el-form-item label="" label-width="30px">
                        <el-radio-group class="vertical-group" v-model="ruleForm.dataPerm" @change="changeDataAuto" style="width:100%;">
                            <p class="radio-wrap" v-for="(item, index) in showDataPerms" :key="index">
                                <el-radio class="radio" :label="item.valStr">
                                    {{ item.name }}
                                </el-radio>
                                <span class="dept-wrap">
                                    <select-dept 
                                        v-if="ruleForm.dataPerm == item.valStr && (ruleForm.dataPerm == '1' || ruleForm.dataPerm == '3')" 
                                        class="dept" 
                                        v-model="ruleForm.deptIds" 
                                        :label.sync="ruleForm.deptNames" 
                                        :max="20"
                                        multiple>
                                    </select-dept>
                                </span>
                            </p>
                        </el-radio-group>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="管理数据范围" name="2">
                    <el-form-item label="" label-width="30px">
                        <el-radio-group class="vertical-group" v-model="ruleForm.opeDataPerm" @change="changeDataAuto2" style="width:100%;">
                            <p class="radio-wrap" v-for="(item, index) in opeDataPerms" :key="index">
                                <el-radio class="radio" :label="item.valStr">
                                    {{ item.name }}
                                </el-radio>
                                <span class="dept-wrap">
                                    <select-dept 
                                        v-if="ruleForm.opeDataPerm == item.valStr && (ruleForm.opeDataPerm == '1' || ruleForm.opeDataPerm == '3')" 
                                        class="dept" 
                                        v-model="ruleForm.opeDeptIds" 
                                        :label.sync="ruleForm.opeDeptNames" 
                                        :max="20"
                                        multiple>
                                    </select-dept>
                                </span>
                            </p>
                        </el-radio-group>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="submitFun" :loading="loading">保存</el-button>
            <el-button @click="closeDialog">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import selectDept from '@/components/selectDept';
import { getDataAuthRange, updateSysDataPerm } from '../../service.js'
export default {
    name: 'setAuth', // 设置数据权限
    props: {},
    components: { selectDept },
    data() {
        return {
            show: false,
            title: '设置数据权限',
            activeTab: '1',
            ruleForm: {
                id          : '', // 主键  
                resourceCode: '', // 来源类型编号  
                resourceId  : '', // 来源ID  
                objCode     : '', // 对象编号  
                objName     : '', // 对象名称  
                dataPerm    : '', // 查看数据权限  
                deptIds     : [], // 查看权限授权机构ids  
                deptNames   : [], // 查看权限授权机构names  
                opeDataPerm : '', // 操作数据权限范围   
                opeDeptIds  : [], // 数据操作授权机构IDS   
                opeDeptNames: [], // 数据操作授权机构names
                systemCode  : '',
            },
            rules: {

            },
            showDataPerms: [],
            opeDataPerms: [],
            loading: false
        }
    },
    methods: {
        showDialog(row) {
            this.show = true;
            this.ruleForm.id = row.id;
            this.ruleForm.resourceCode = row.resourceCode;
            this.ruleForm.resourceId = row.resourceId;
            this.ruleForm.objCode = row.objCode;
            this.ruleForm.objName = row.objName;
            this.ruleForm.dataPerm = row.dataPerm;
            this.ruleForm.deptIds = row.deptIds ? row.deptIds.split(',') : [];
            this.ruleForm.deptNames = row.deptNames ? row.deptNames.split(',') : [];
            this.ruleForm.opeDataPerm = row.opeDataPerm;
            this.ruleForm.opeDeptIds = row.opeDeptIds ? row.opeDeptIds.split(',') : [];
            this.ruleForm.opeDeptNames = row.opeDeptNames ? row.opeDeptNames.split(',') : [];
            this.ruleForm.systemCode = row.systemCode;
            this.dataAuthRangeFun(row.objCode);
        },
        closeDialog() {
            this.show = false;
        },
        dataAuthRangeFun(objCode) {
            let params = {
                objCode: objCode,
            }
            getDataAuthRange(params).then(res => {
                if (res.data.code == 1000) {
                    let data = res.data.data;
                    if (data) {
                        this.showDataPerms = (data.showDataPerms || []).map(item => {
                            return {
                                name: item.name,
                                valStr: item.valStr
                            }
                        })
                        this.opeDataPerms = (data.opeDataPerms || []).map(item => {
                            return {
                                name: item.name,
                                valStr: item.valStr
                            }
                        })
                    }
                }
            })
        },
        changeDataAuto() {
            this.ruleForm.deptId = [];
            this.ruleForm.deptName = [];
        },
        changeDataAuto2() {
            this.ruleForm.opeDeptIds = [];
            this.ruleForm.opeDeptNames = [];
        },
        submitFun() {
            this.$refs.form.validate(valid => {
                let params = {
                    id          : this.ruleForm.id, // 主键  
                    resourceCode: this.ruleForm.resourceCode, // 来源类型编号  
                    resourceId  : this.ruleForm.resourceId, // 来源ID  
                    objCode     : this.ruleForm.objCode, // 对象编号  
                    objName     : this.ruleForm.objName, // 对象名称  
                    dataPerm    : this.ruleForm.dataPerm, // 查看数据权限  
                    deptIds     : this.ruleForm.deptIds.join(), // 查看权限授权机构ids  
                    deptNames   : this.ruleForm.deptNames.join(), // 查看权限授权机构names  
                    opeDataPerm : this.ruleForm.opeDataPerm, // 操作数据权限范围   
                    opeDeptIds  : this.ruleForm.opeDeptIds.join(), // 数据操作授权机构IDS   
                    opeDeptNames: this.ruleForm.opeDeptNames.join(), // 数据操作授权机构names
                    systemCode  : this.ruleForm.systemCode,
                }
                this.loading = true;
                updateSysDataPerm(params).then((res) => {
                    if(res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '保存成功',
                        })
                        this.$emit('refresh');
                        this.closeDialog();
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.set-auth {
    .vertical-group {
        .radio-wrap {
            line-height: 45px;
            .dept-wrap {
                display: inline-block;
                vertical-align: middle;
                width: 350px;
                line-height: 35px;
                padding-left: 30px;
            }
        }
    }

    /deep/ {
        .el-dialog__body {
            padding: 0 20px;
        }
    }
}
</style>